<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/includes/templates/generalTemplate.xhtml">
    <ui:define name="content">
        <style>

            .top-bar2{
                border: 1px solid #eeeeee;
            }
        </style>   
        <div align="center"  >
            <div id="main" style="min-height:700px;width:100%;height:auto;" >
                <br/>
                <br/>
                <br/>
                <br/>



                <section  id="services" class="services" >
                    <div class="row" data-view="services" >

                        <div class="row">
                            <div class="columns large-12 large-centered">
                                <section  class="headline">
                                    <h2 style="text-align:left;">

                                        #{messages['page.aditionalInformation.tittle1']}
                                    </h2>
                                    <h5 class="subheader" style="text-align:left;">
                                        #{messages['page.aditionalInformation.descripcion1']}
                                    </h5>
                                </section>
                            </div>
                        </div>
                        <div class="row">
                            <div class="columns large-12 large-centered">


                                <h:form id="aditionalInformation_form">

                                    <table style="width:600px;">
                                        <thead>
                                            <tr>
                                                <td colspan="2">
                                                   
                                                    #{tittles['page.aditionalInformation.tittle1']}
                                                    
                                                </td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right;width:250px; ">
                                                    <h:outputLabel for="identification" value="#{labels['page.aditionalInformation.identitynumber']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="identification" label="#{labels['page.aditionalInformation.identitynumber']}" 
                                                                 value="#{aditionalInformationBean.user.identification}" 
                                                                 required="true" 
                                                                 title="#{labels['page.aditionalInformation.identitynumberexplain']}">
                                                    </p:inputText>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="idType" value="#{labels['page.aditionalInformation.idType']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;padding-bottom:30px;">
                                                    <h:selectOneMenu label="#{labels['page.aditionalInformation.idType']}" 
                                                                     value="#{aditionalInformationBean.identificationTypeSelected}" 
                                                                     title="#{labels['page.aditionalInformation.idTypeExplain']}"
                                                                     id="idType" required="true" style="width:100%" >
                                                        <f:selectItem itemLabel="#{labels['page.aditionalInformation.idTypeExplain']}" itemValue="" />  
                                                        <f:selectItems value="#{aditionalInformationBean.listIdTypeSelectItem}" var="qlist" itemValue="#{qlist.value}" itemLabel="#{qlist.label}" >
                                                        </f:selectItems>
                                                    </h:selectOneMenu>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="firstName" value="#{labels['page.aditionalInformation.firstName']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="firstName" 
                                                                 label="#{labels['page.aditionalInformation.firstName']}" 
                                                                 title="#{labels['page.aditionalInformation.firstNameExplain']}"
                                                                 value="#{aditionalInformationBean.user.firstName}" 
                                                                 required="true">
                                                    </p:inputText>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="middleName" value="#{labels['page.aditionalInformation.secondName']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="middleName" label="#{labels['page.aditionalInformation.secondName']}" 
                                                                 value="#{aditionalInformationBean.user.middleName}"
                                                                 title="#{labels['page.aditionalInformation.secondNameExplain']}"
                                                                 >
                                                    </p:inputText>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="firstLastName" value="#{labels['page.aditionalInformation.firstLastName']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="firstLastName" 
                                                                 label="#{labels['page.aditionalInformation.firstLastName']}" 
                                                                 value="#{aditionalInformationBean.user.firstLastName}" 
                                                                 required="true"
                                                                 title="#{labels['page.aditionalInformation.firstLastNameExplain']}">
                                                    </p:inputText>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="middleLastName" value="#{labels['page.aditionalInformation.middleLastName']}" ></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="middleLastName" 
                                                                 label="#{labels['page.aditionalInformation.middleLastName']}"
                                                                 value="#{aditionalInformationBean.user.middleLastName}"
                                                                 title="#{labels['page.aditionalInformation.middleLastNameExplain']}"
                                                                 >
                                                    </p:inputText>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="userTelephoneNumber" 
                                                                   value="#{labels['page.aditionalInformation.userTelephoneNumber']}">
                                                    </h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="userTelephoneNumber" 
                                                                 label="#{labels['page.aditionalInformation.userTelephoneNumber']}" 
                                                                 value="#{aditionalInformationBean.user.userTelephoneNumber}" 
                                                                 required="true" 
                                                                 requiredMessage="#{labels['page.aditionalInformation.userTelephoneNumberRequiredMessage']}"
                                                                 converter="javax.faces.Integer"
                                                                 title="#{labels['page.aditionalInformation.userTelephoneNumberExplain']}"
                                                                 >
                                                    </p:inputText>
                                                    
                                                    <p:watermark for="userTelephoneNumber" 
                                                                 value="#{labels['page.aditionalInformation.placeHolder.userTelephoneNumber']}" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="userMobilePhoneNumber" value="#{labels['page.aditionalInformation.userMobilePhoneNumber']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="userMobilePhoneNumber" 
                                                                 label="#{labels['page.aditionalInformation.userMobilePhoneNumber']}" 
                                                                 value="#{aditionalInformationBean.user.userMobilePhoneNumber}"
                                                                 required="true" 
                                                                 converter="javax.faces.Number"
                                                                 >
                                                    </p:inputText>
                                                    <p:watermark for="userMobilePhoneNumber" 
                                                                 value="#{labels['page.aditionalInformation.placeHolder.userMobilePhoneNumber']}" />
                                                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="userAddress" value="Dirección"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="userAddress" label="Direccion" value="#{aditionalInformationBean.user.userAddress}" required="true">
                                                    </p:inputText>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background:#FFFFFF;height:20px;">
                                                        <p:messages id="msgsAddInf" showDetail="true" autoUpdate="true" closable="true"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background:#FFFFFF;height:20px;text-align:center;    ">
                                                    <p:commandButton id="newUserButton" 
                                                                     style="font-family:'Open sans',sans-serif;font-size:18px;"
                                                                     value="Continuar" 
                                                                     action="#{aditionalInformationBean.updateInformationUser}"/>  
                                                </td>
                                            </tr>
                                        </tbody>
                                       
                                    </table>
                                </h:form>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div> 
    </ui:define>
</ui:composition>